import { Component, OnInit, Input, Output, EventEmitter, ChangeDetectionStrategy } from '@angular/core';

@Component({
  selector: 'el-menu',
  templateUrl: './menu.component.html',
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class MenuComponent implements OnInit {
  @Input() mode: string = 'vertical';
  @Input() theme: string = 'light';
  @Input() model: string = '';
  @Input() nativeClass: string = '';
  @Input() defaultOpeneds: Array<string> = [];
  @Input() uniqueOpened: boolean = false;
  @Input() collapse: boolean = false;
  @Input() menuTrigger: string = 'hover';
  @Input() backgroundColor: string = '';
  @Input() textColor: string = '';
  @Input() activeTextColor: string = '';
  @Output() modelChange: EventEmitter<any> = new EventEmitter();
  @Input() openedMenus: Array<string> = this.defaultOpeneds ? this.defaultOpeneds.slice(0) : [];
  @Input() showBorderIndex: string = '';
  constructor() { }

  ngOnInit(): void {
  }


  openMenu(index: any) {
    var /** @type {?} */ openedMenus = this.openedMenus;
    if (openedMenus.indexOf(index) !== -1)
      return;
    this.openedMenus.push(index);
  }

  closeMenu(index: any) {
    this.openedMenus.splice(this.openedMenus.indexOf(index), 1);
  }

  selectHandle(index: any, path: any) {
    var /** @type {?} */ main = path || index;
    this.model = main;
    this.modelChange.emit(main);
  }


  hoverBackgroundColor() {
    return this.backgroundColor ? this.hexToRGB() : '';
  }

  private hexToRGB() {
    var /** @type {?} */ hex = +this.backgroundColor.replace('#', '0x');
    var /** @type {?} */ rgb = [(hex & 0xff0000) >> 16, (hex & 0x00ff00) >> 8, hex & 0x0000ff];
    return "rgb(" + rgb.map(function (v) { return ~~(0.8 * v); }).join(',') + ")";
  }
}
